<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    dialog-width="600px"
    :page-show="pageShow"
    @dialog-close="dialogClose"
  >
    <template #toolPanel />
    <template #searchPanel>
      <search-panel :show-add-button="false" :show-search-button="true" :showExportDataButton="true" @exportData="exportDataUpFlow"
                    labelWidth="73" @search="search"   :left="true">
        <el-form-item label="运营商:" prop="operatoruid">
          <el-select v-model="filters.operatoruid" filterable style="width: 212px;" clearable collapse-tags placeholder="请选择运营商">
            <el-option value="0" label="全部">全部</el-option>
            <el-option
              v-for="item in operator"
              :key="item.operatoruid"
              :label="item.operatorname"
              :value="item.operatoruid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供货商:" prop="useruuid">
          <el-select v-model="filters.useruuid" style="width: 212px;" filterable placeholder="请选择供货商" clearable collapse-tags @change="changeUpShop" >
            <el-option value="0" label="全部">全部</el-option>
            <el-option
              v-for="item in users"
              :key="item.user.useruuid"
              :label="item.user.username"
              :value="item.user.useruuid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份:" prop="provinceuuid">
          <el-select v-model="filters.provincename" filterable placeholder="请选择省份" clearable collapse-tags @change="changeUpShopName" >
            <el-option value="0" label="全部">全部</el-option>
            <el-option
              v-for="item in info"
              :key="item.provinceuuid"
              :label="item.provincename"
              :value="item.provincename">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权益产品:" prop="upprouuid">
          <el-select v-model="filters.upprouuid" collapse-tags filterable placeholder="请选择权益产品">
            <el-option value="0" label="全部">全部</el-option>
            <el-option
              v-for="item in products"
              :key="item.upprouuid"
              :label="item.productName"
              :value="item.upprouuid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间:">
          <el-date-picker type="datetime" placeholder="开始时间" clearable format="yyyy-MM-dd HH:mm:ss"   v-model="filters.starttime" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker type="datetime" placeholder="结束时间" clearable format="yyyy-MM-dd HH:mm:ss"   v-model="filters.endtime" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <span>总成功率:{{sumSuccessRate}}</span>
        </el-form-item>
      </search-panel>
    </template>
    <template #contentPanel>
      <el-table :data="tableData" highlight-current-row border max-height="620"  show-summary style="width: 100%;">
        <el-table-column type="index" width="80" label="编号">
        </el-table-column>
        <el-table-column prop="username" label="渠道名称" sortable show-overflow-tooltip  >
        </el-table-column>
        <el-table-column prop="proname" label="产品名称" sortable show-overflow-tooltip  >
        </el-table-column>
        <el-table-column align="center"	prop="总订单"	 label="总订单">
          <el-table-column prop="sumcount" label="交易笔数" sortable align="center" show-overflow-tooltip  >
          </el-table-column>
          <el-table-column prop="summoney" label="原价" sortable align="center" show-overflow-tooltip  >
          </el-table-column>
          <el-table-column prop="sumdis" label="售价" sortable align="center" show-overflow-tooltip  >
          </el-table-column>
        </el-table-column>
        <el-table-column  label="成功订单" align="center" show-overflow-tooltip  >
          <el-table-column prop="successnum" label="交易笔数" sortable align="center" show-overflow-tooltip  >
          </el-table-column>
          <el-table-column prop="sucmoney" label="原价" sortable align="center" show-overflow-tooltip >
          </el-table-column>
          <el-table-column prop="sudis" label="售价" align="center" sortable show-overflow-tooltip  >
          </el-table-column>
          <el-table-column prop="successRate" label="成功率" align="center" sortable show-overflow-tooltip  >
          </el-table-column>
        </el-table-column>
        <el-table-column  label="失败订单" align="center"  show-overflow-tooltip  >
          <el-table-column prop="failtnum" label="交易笔数" align="center" sortable show-overflow-tooltip  >
          </el-table-column>
          <el-table-column prop="famoney" label="原价" align="center" sortable show-overflow-tooltip >
          </el-table-column>
          <el-table-column prop="failtdis" label="售价" align="center" sortable show-overflow-tooltip  >
          </el-table-column>
        </el-table-column>
      </el-table>
      <!--工具条-->
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total,sizes,prev, pager, next"
        :total="totalCount">
      </el-pagination>
<!--      <data-table-->
<!--        :value="tableData"-->
<!--        :total-count="totalCount"-->
<!--        :has-action="false"-->
<!--        :current="start"-->
<!--        :table-column-attributes="tableColumnAttributes"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--      >-->
<!--        <template #action="{row}">-->
<!--        </template>-->
<!--      </data-table>-->
    </template>

    <template #dialog>
    </template>

  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import util from '../../../utils/util'
import {findUpFlowCount,exportDataUpFlow,findByUuidProduct} from '@/api/countapi'
import {findAllUpShopInfo,findPageOperator,findOpeProBusShop} from '@/api/utilsapi'
import moment from 'moment';

export default {
  name: 'CountUpFlow',
  mixins: [
    baseMixin({
      idName: 'id',
      // findData:findUpFlowCount,
      format(res) {
        return res.map(data => {
          return data
        })
      }
    })
  ],
  data() {
    return {
      pageShow: true,
      dialogData:{},
      users:[],
      products:[],
      operator:[],
      info:[],
      sumSuccessRate:"0%",
      ups:[],
      tableColumnAttributes: [
        { name: '供货名称', value: 'username' },
        { name: '充值金额', value: 'rechargeamount' },
        { name: '充值后余额', value: 'balance' },
        { name: '充值时间', value: 'rechargetime' },
        { name: '充值类型', value: 'payType' },
        { name: '充值状态', value: 'rechargestatus'},
        { name: '备注', value: 'remark' },
      ],
      filters: {
        useruuid: '',
        upprouuid:'',
        provinceuuid:'',
        operatoruid:'',
        provincename:'',
        starttime:moment(new Date(),"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD') + " 00:00:00",
        endtime:moment(new Date(),"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD') + " 23:59:59"
      },
    }
  },
  methods: {
    async search(form){
      let para = {
        start: this.start,
        pageSize: this.pageSize,
        useruuid: this.filters.useruuid == "" || this.filters.useruuid == 0 ? "" : this.filters.useruuid,
        upprouuid: this.filters.upprouuid == "" || this.filters.upprouuid == 0 ? "" : this.filters.upprouuid,
        provinceuuid:this.filters.provincename == "" || this.filters.provincename == 0 || this.filters.provincename == "全国" ? "" : this.filters.provincename,
        operatoruid:this.filters.operatoruid == "" || this.filters.operatoruid == 0  ? "" : this.filters.operatoruid,
        starttime:(this.filters.starttime == "" || this.filters.starttime == undefined) ? "" : moment(this.filters.starttime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
        endtime:(this.filters.endtime == "" || this.filters.endtime == undefined) ? "" : moment(this.filters.endtime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss')
      };
      this.searchOptions = para;
      this.searchOptions.pageSize = this.pageSize;
      this.searchOptions.start = this.start;
      const {message,code,data} = await findUpFlowCount(this.searchOptions);
      const result = data.result;
      if(result){
        let sum = 0;
        let success = 0 ;
        result.forEach(item =>{
          item.successRate = (item.successnum / item.sumcount).toFixed(2) * 100 +"%";
          if(item.successRate == "NaN%"){
            item.successRate = "0%";
          }
          sum += parseInt(item.sumcount);
          success += parseInt(item.successnum);
        })
        this.sumSuccessRate = (sum == 0 ? 0 :  (success / sum).toFixed(2) * 100 )+"%";
        this.tableData = result;
        this.totalCount = data.totalCount;
      }else{
        this.tableData = [];
        this.totalCount = 0 ;
        this.sumSuccessRate = "0%";
      }
    },
    async findAllUpShopInfo(){
      let para = {
        test:''
      };
      const result = await findAllUpShopInfo(para);
      if(result.data){
        this.users = result.data;
      }
    },
    async exportDataUpFlow () {
      let para = {
        start: this.start,
        pageSize: this.pageSize,
        useruuid: this.filters.useruuid,
        upprouuid: this.filters.upprouuid,
        starttime:(this.filters.starttime == "" || this.filters.starttime == undefined) ? "" : moment(this.filters.starttime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
        endtime:(this.filters.endtime == "" || this.filters.endtime == undefined) ? "" : moment(this.filters.endtime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss')
      };
      const result = await exportDataUpFlow(para);
      if(result.data.path){
        window.open(result.data.path);
      }
    },
    changeUpShopName(value){
      this.filters.provincename = value;
    },
    async findPageOperator() {
      let para = {
        start: 1,
        pageSize:10,
        operatorname:'',
      };
      const result = await findPageOperator(para);
      if(result.data && result.data.result){
        this.operator = result.data.result;
      }
    },
    async findOpeProBusShop(){
      let para = {test: ''};
      const result = await findOpeProBusShop(para);
      if(result.code == "0"){
        this.info = result.data.info;
        this.bus = result.data.bus;
      }
    },
    async changeUpShop(value){
      //根据供货商id查询对应的产品统计，
      let para = {
        useruuid: value
      };
      const result = await findByUuidProduct(para);
      if(result.data){
        this.products = result.data;
      }
    },
    /**
     * 分页函数
     * @param pageSize
     */
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.search();
    },
    /**
     * 分页
     * @param currentPage
     */
    handleCurrentChange(currentPage) {
      this.start = currentPage
      this.search();
    },
  },
  mounted() {
    this.findAllUpShopInfo();
    this.findPageOperator();
    this.findOpeProBusShop();
  }
}
</script>
